<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="customerDialogs"
      width="600px"
      center
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div>
        <p class="kf_top">{{ title }}<router-link v-if="member" :to="`/account/selfrenewal`" style="font-size: 12px;color: #0c7ff2" type="primary">查看会员报价</router-link></p>
        <div class="mb16 flex_center">
          <div class="flex_start kf_body">
            <img :src="kfdata.pic || 'https://img1.17img.cn/ui/simg/instrument/20220308/yxt_kefu_moren_2x_20220719.png'" width="60px" class="kf_img" alt="">
            <div>
              <div class="kf_title">
                {{ kfdata.name }}
                <span
                  style="color: #7e8790; font-size: 12px; padding-left: 5px"
                >{{ kfdata.tlname }}</span>
              </div>
              <div class="ptb15">
                <i class="el-icon-phone-outline" style="padding-right: 5px" />{{ kfdata.mobile }}
              </div>
              <div>
                <i class="el-icon-message" style="padding-right: 5px" />{{ kfdata.email }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: 'CustomerDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    member: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      customerDialogs: false,
      kfdata: {
        name: '',
        tlname: '',
        email: '',
        mobile: '',
        pic: ''
      }
    }
  },
  mounted() {
    this.findSaleByIMListId()
  },
  methods: {
    findSaleByIMListId() {
      const form = {
        imListId: Cookies.get('imListId')
          ? Cookies.get('imListId')
          : 'WAMO100370'
      }
      // api.help.findSaleByIMListId(form).then((res) => {
      //   if (res.code == 200) {
      //     this.kfdata = res.data
      //   }
      // })
    }
  }
}
</script>

<style scoped>
.ptb15 {
  padding: 8px 0;
}
.kf_top {
  margin: 7px auto 32px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #202933;
  line-height: 19px;
}
::v-deep .el-dialog__header {
  background: #f5f8fc;
  text-align: left;
  font-size: 16px;
  color: #202933;
  padding: 12px 16px;
}
::v-deep .el-dialog__header .el-dialog__headerbtn {
  top: 16px;
  right: 16px;
}
.flex_start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.kf_body {
  padding: 16px;
  background: linear-gradient(269deg, #fff4f4 0%, #ffffff 100%);
}
.kf_img {
  border-radius: 50%;
  margin-right: 16px;
}
.kf_title {
  font-size: 16px;
  font-weight: 600;
  color: #202933;
  line-height: 19px;
}
.flex_center {
  display: flex;
  justify-content: center;
}
</style>
